<template>
  <div>123</div>
</template>

<script setup lang="ts">
//  泛型就是一些类型的复用，  比如类型别名type 可以写泛型。 接口 interface 也可以写泛型， 函数function 也可以写泛型
// 1. 下面是类型别名使用泛型变量，就叫 泛型别名
type Data<T> = {
  msg: string;
  code: number;
  data: T;
};
// 2. 下面是接口类型使用泛型变量，就叫泛型接口
interface IdFn<T> {
  name: T[];
  id: () => T;
  ids: () => T[];
}
// 3. 下面是函数类型使用泛型变量， 就叫泛型函数
function getId<T>(id: T): T {
  return id;
}

interface Todo {
  id: number;
  name: string;
}
const obj: Todo = {
  id: 100,
  name: '字符串',
};

function getProps<T extends object, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

getProps<Todo, 'name'>(obj, 'name');

getProps(obj, 'name'); // string    T[K] ==== Todo['name'] ==== string
getProps(obj, 'id'); // number
</script>
